<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>particles.js</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/login.css">
    <script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
    <link rel="stylesheet" type="text/css" href="css/login1.css">
</head>
<body>
<!-- particles.js container -->
<div id="particles-js" style="display: flex;align-items: center;justify-content: center">
</div>
<div class="container" id="container">
    <div class="form-container sign-up-container">
        <form action="#">
            <h1>第三方按钮注册</h1>
            <div class="social-container"><a href="#" class="social">
                <ion-icon name="logo-facebook"></ion-icon>
            </a> <a href="#" class="social">
                <ion-icon name="logo-googleplus"></ion-icon>
            </a> <a href="#" class="social">
                <ion-icon name="logo-linkedin"></ion-icon>
            </a></div>
            <span>或输入你想使用的用户名注册</span>
            <input type="text" placeholder="用户名" id="regUserId"><span id="userExist"></span>
            <input type="email" placeholder="密码" id="regPassword">
            <input type="password" placeholder="确认密码" id="comPassword">
            <input type="button" id="regBtn" value="注册"/>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="/account/main" method="post" id="loginForm">
            <h1>第三方登录</h1>
            <div class="social-container"><a href="#" class="social">
                <ion-icon name="logo-facebook"></ion-icon>
            </a> <a href="#" class="social">
                <ion-icon name="logo-googleplus"></ion-icon>
            </a> <a href="#" class="social">
                <ion-icon name="logo-linkedin"></ion-icon>
            </a></div>
            <span>或用账号密码登录</span>
            <input type="email" placeholder="用户名" id="userId">
            <input type="password" placeholder="密码" id="password">
            <input type="button" value="登录" id="loginBtn"/>
            <a href="/account/admin">切换到管理员s登录</a>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>欢迎回来</h1>
                <p>与我们保持联系请登录您的个人信息</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>欢迎光临</h1>
                <p>输入您的个人资料，并与我们一起开始旅程</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>


<!-- scripts -->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="js/script.js"></script>
<script src="js/account.js" type="module"></script>
<script src="js/jquery.min.js"></script>
</body>
</html>
<style>
    a {
        color: #53e3a6;
    }

    a:hover {
        color: yellow;
        font-size: 200%;

    }

    a:active {
        color: blue;
    }
</style>


<!--垃圾登录界面-->
<!--<!DOCTYPE html>-->

<!--<html lang="en" xmlns="http://www.w3.org/1999/html">-->

<!--<head>-->

<!--    <meta charset="UTF-8">-->

<!--    <title>Title</title>-->

<!--    <style type="text/css">-->

<!--        * {-->

<!--            box-sizing: border-box;-->

<!--        }-->

<!--        body {-->

<!--            margin: 0;-->

<!--            padding: 0;-->

<!--            font: 16px/20px microsft yahei;-->

<!--        }-->

<!--        .wrap {-->

<!--            width: 100%;-->

<!--            height: 100%;-->

<!--            padding: 10% 0;-->

<!--            position: fixed;-->

<!--            opacity: 0.8;-->

<!--            background: linear-gradient(to bottom right, #000000, #656565);-->

<!--            background: -webkit-linear-gradient(to bottom right, #50a3a2, #53e3a6);-->

<!--        }-->

<!--        .container {-->

<!--            width: 60%;-->

<!--            margin: 0 auto;-->

<!--        }-->

<!--        .container h1 {-->

<!--            text-align: center;-->

<!--            color: #FFFFFF;-->

<!--            font-weight: 500;-->

<!--        }-->

<!--        .container input {-->

<!--            width: 320px;-->

<!--            display: block;-->

<!--            height: 36px;-->

<!--            border: 0;-->

<!--            outline: 0;-->

<!--            padding: 6px 10px;-->

<!--            line-height: 24px;-->

<!--            margin: 32px auto;-->

<!--            -webkit-transition: all 0s ease-in 0.1ms;-->

<!--            -moz-transition: all 0s ease-in 0.1ms;-->

<!--            transition: all 0s ease-in 0.1ms;-->

<!--        }-->

<!--        .container input[type="text"], .container input[type="password"] {-->

<!--            background-color: #FFFFFF;-->

<!--            font-size: 16px;-->

<!--            color: #50a3a2;-->

<!--        }-->

<!--        .container input[type='submit'] {-->

<!--            font-size: 16px;-->

<!--            letter-spacing: 2px;-->

<!--            color: #666666;-->

<!--            background-color: #FFFFFF;-->

<!--        }-->

<!--        .container input:focus {-->

<!--            width: 400px;-->

<!--        }-->

<!--        .container input[type='submit']:hover {-->

<!--            cursor: pointer;-->

<!--            width: 400px;-->

<!--        }-->

<!--        .to_login {-->

<!--            color: #a7c4c9;-->

<!--        }-->

<!--        .text {-->

<!--            color: #e2dfe4;-->

<!--        }-->

<!--        .wrap ul {-->

<!--            position: absolute;-->

<!--            top: 0;-->

<!--            left: 0;-->

<!--            width: 100%;-->

<!--            height: 100%;-->

<!--            z-index: -20;-->

<!--        }-->

<!--        .wrap ul li {-->

<!--            list-style-type: none;-->

<!--            display: block;-->

<!--            position: absolute;-->

<!--            bottom: -120px;-->

<!--            width: 15px;-->

<!--            height: 15px;-->

<!--            z-index: -8;-->

<!--            border-radius: 50%;-->

<!--            box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2),-->
<!--            inset 0px 0px 5px rgba(0, 0, 0, .5),-->
<!--            inset -3px -3px 5px rgba(0, 0, 0, .5),-->
<!--            0 0 20px rgba(255, 255, 255, .75);-->

<!--            background-color: rgba(255, 255, 255, 0.15);-->

<!--            animotion: square 25s infinite;-->

<!--            -webkit-animation: square 25s infinite;-->

<!--        }-->

<!--        .wrap ul li:nth-child(1) {-->

<!--            left: 0;-->

<!--            animation-duration: 10s;-->

<!--            -moz-animation-duration: 10s;-->

<!--            -o-animation-duration: 10s;-->

<!--            -webkit-animation-duration: 10s;-->

<!--        }-->

<!--        .wrap ul li:nth-child(2) {-->

<!--            width: 40px;-->

<!--            height: 40px;-->

<!--            left: 10%;-->

<!--            animation-duration: 15s;-->

<!--            -moz-animation-duration: 15s;-->

<!--            -o-animation-duration: 15s;-->

<!--            -webkit-animation-duration: 11s;-->

<!--        }-->

<!--        .wrap ul li:nth-child(3) {-->

<!--            left: 20%;-->

<!--            width: 25px;-->

<!--            height: 25px;-->

<!--            animation-duration: 12s;-->

<!--            -moz-animation-duration: 12s;-->

<!--            -o-animation-duration: 12s;-->

<!--            -webkit-animation-duration: 12s;-->

<!--        }-->

<!--        .wrap ul li:nth-child(4) {-->

<!--            width: 50px;-->

<!--            height: 50px;-->

<!--            left: 30%;-->

<!--            -webkit-animation-delay: 3s;-->

<!--            -moz-animation-delay: 3s;-->

<!--            -o-animation-delay: 3s;-->

<!--            animation-delay: 3s;-->

<!--            animation-duration: 12s;-->

<!--            -moz-animation-duration: 12s;-->

<!--            -o-animation-duration: 12s;-->

<!--            -webkit-animation-duration: 12s;-->

<!--        }-->

<!--        .wrap ul li:nth-child(5) {-->

<!--            width: 60px;-->

<!--            height: 60px;-->

<!--            left: 40%;-->

<!--            animation-duration: 10s;-->

<!--            -moz-animation-duration: 10s;-->

<!--            -o-animation-duration: 10s;-->

<!--            -webkit-animation-duration: 10s;-->

<!--        }-->

<!--        .wrap ul li:nth-child(6) {-->

<!--            width: 75px;-->

<!--            height: 75px;-->

<!--            left: 50%;-->

<!--            -webkit-animation-delay: 7s;-->

<!--            -moz-animation-delay: 7s;-->

<!--            -o-animation-delay: 7s;-->

<!--            animation-delay: 7s;-->

<!--        }-->

<!--        .wrap ul li:nth-child(7) {-->

<!--            left: 60%;-->

<!--            width: 30px;-->

<!--            height: 30px;-->

<!--            animation-duration: 8s;-->

<!--            -moz-animation-duration: 8s;-->

<!--            -o-animation-duration: 8s;-->

<!--            -webkit-animation-duration: 8s;-->

<!--        }-->

<!--        .wrap ul li:nth-child(8) {-->

<!--            width: 90px;-->

<!--            height: 90px;-->

<!--            left: 70%;-->

<!--            -webkit-animation-delay: 4s;-->

<!--            -moz-animation-delay: 4s;-->

<!--            -o-animation-delay: 4s;-->

<!--            animation-delay: 4s;-->

<!--        }-->

<!--        .wrap ul li:nth-child(9) {-->

<!--            width: 50px;-->

<!--            height: 50px;-->

<!--            left: 80%;-->

<!--            animation-duration: 20s;-->

<!--            -moz-animation-duration: 20s;-->

<!--            -o-animation-duration: 20s;-->

<!--            -webkit-animation-duration: 20s;-->

<!--        }-->

<!--        .wrap ul li:nth-child(10) {-->

<!--            width: 75px;-->

<!--            height: 75px;-->

<!--            left: 90%;-->

<!--            -webkit-animation-delay: 6s;-->

<!--            -moz-animation-delay: 6s;-->

<!--            -o-animation-delay: 6s;-->

<!--            animation-delay: 6s;-->

<!--            animation-duration: 30s;-->

<!--            -moz-animation-duration: 30s;-->

<!--            -o-animation-duration: 30s;-->

<!--            -webkit-animation-duration: 30s;-->

<!--        }-->

<!--        @keyframes square {-->

<!--            0% {-->

<!--                -webkit-transform: translateY(0);-->

<!--                transform: translateY(0)-->

<!--            }-->

<!--            100% {-->

<!--                bottom: 400px;-->

<!--                -webkit-transform: translateY(-500);-->

<!--                transform: translateY(-500)-->

<!--            }-->

<!--        }-->

<!--        @-webkit-keyframes square {-->

<!--            0% {-->

<!--                -webkit-transform: translateY(0);-->

<!--                transform: translateY(0)-->

<!--            }-->

<!--            100% {-->

<!--                bottom: 400px;-->

<!--                -webkit-transform: translateY(-500);-->

<!--                transform: translateY(-500)-->

<!--            }-->

<!--        }-->

<!--    </style>-->

<!--</head>-->

<!--<body>-->

<!--<div class="wrap">-->


<!--    <div class="container">-->

<!--        <h1 style="color: white; margin: 0; text-align: center">智能宿舍管理系统</h1>-->
<!--        </br></br>-->
<!--        <h1 style="color: white; margin: 0; text-align: center">Login in</h1>-->

<!--        <form action="/account/main" method="post">-->

<!--            <label><input type="text" placeholder="Your username"/></label>-->

<!--            <label><input type="text" placeholder="Your email"/></label>-->

<!--            <label><input type="password" placeholder="password"/></label>-->

<!--            <label><input type="password" placeholder="Please confirm your password"/></label>-->


<!--            <input type="submit" value="Sign in"/>-->

<!--            <p class="change_link" style="text-align: center">-->

<!--                <span class="text">don't have a member ?</span>-->

<!--                <a href="/account/newAccount" class="to_login"> Go and register </a>-->

<!--            </p>-->

<!--        </form>-->

<!--    </div>-->
<!--    <ul>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--    </ul>-->
<!--</div>-->
<!--</body>-->
<!--</html>-->
